<template>
    <div class="form-page">
        <el-form
            ref="dataForm"
            element-loading-text="正在导入试题。。。"
            :model="dataForm"
            :inline="true"
            label-width="10em"
            :rules="dataFormRule"
            class="data-form"
        >
            <div class="form-item xy-start al-str">
                <div class="title">导入信息</div>
                <div class="yx-start al-start data" align="center">
                    <el-form-item label="学科" prop="classificationId">
                        <el-cascader
                            ref="classification"
                            :key="zeroOne"
                            v-model="dataForm.classificationId"
                            :props="classificationProps"
                            :show-all-levels="false"
                            filterable
                            clearable
                        ></el-cascader>
                    </el-form-item>

                    <div class="childrenDiv">
                        <el-upload
                            ref="upload"
                            class="upload-demo"
                            action="/api/exam/chapters/import-chapter"
                            :data="dataForm"
                            :multiple="false"
                            accept=".xls,.xlsx"
                            :limit="1"
                            :on-progress="uploading"
                            :on-success="successUpload"
                            :on-error="failUpload"
                            :auto-upload="false"
                        >
                            <el-button type="primary"
                                >上传<i
                                    class="el-icon-upload el-icon--right"
                                ></i
                            ></el-button>
                            <span slot="tip" class="el-upload__tip"
                                >只能上传excel文件</span
                            >
                        </el-upload>
                    </div>

                    <div class="childrenDiv">
                        <el-button
                            style="margin-left: 10px;"
                            size="small"
                            type="success"
                            @click="submitForm()"
                            >导入
                        </el-button>
                    </div>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import {
    fetchClassificationChildren,
    fetchClassificationFirst
} from "@/api/course";

var options = {
    lock: true,
    text: "正在导入章节",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)"
};

export default {
    name: "ImportExamChapter",
    mixins: [],
    data() {
        return {
            zeroOne: 0,
            dataForm: {
                classificationId: null,
                paperType: null
            },
            loading: false,
            currentClassificationId: null,
            classificationProps: {
                lazy: true,
                checkStrictly: true,
                lazyLoad: this.getClassification
            },

            dataFormRule: {
                classificationId: [
                    { required: true, message: "请选择！", trigger: "change" }
                ]
            }
        };
    },
    computed: {},

    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {},
    methods: {
        getClassification(node, resolve) {
            const { level } = node;
            let disable = false;
            if (!node.data) {
                fetchClassificationFirst().then(res => {
                    if (res !== null) {
                        const nodes = Array.from(res).map(item => {
                            disable =
                                this.currentClassificationId !== null &&
                                item.id === this.currentClassificationId;
                            return {
                                value: item.id,
                                label: `${item.name}`,
                                leaf:
                                    level >= (item.children.length > 0 ? 1 : 0),
                                disabled: disable
                            };
                        });
                        resolve(nodes);
                    }
                });
            } else {
                fetchClassificationChildren({ id: node.data.value }).then(
                    res => {
                        const nodes = Array.from(res).map(item => {
                            disable =
                                (this.currentClassificationId !== null &&
                                    item.id === this.currentClassificationId) ||
                                this.currentClassificationId === item.parentId;
                            return {
                                value: item.id,
                                label: `${item.name}`,
                                leaf:
                                    level >=
                                    (item.children.length > 0 ? level + 1 : 0),
                                disabled: disable
                            };
                        });
                        resolve(nodes);
                    }
                );
            }
        },

        submitForm() {
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$refs.upload.submit();
                } else {
                    return false;
                }
            });
        },
        uploading() {
            this.$loading(options);
        },
        successUpload(response) {
            this.$loading().close();
            this.$message({
                showClose: true,
                message: "上传成功",
                type: "success"
            });
            // let msg="";
            // const res = response.data
            // switch (res.res) {
            // case "success" :
            //     msg="导入成功！一共"+res.count+"道，成功"+res.okNum+"道，修改"+res.existNum+"道"
            //     break
            // case "fail":
            //     msg="导入部分试题失败！一共"+res.count+"道，成功"+res.okNum+"道，修改"+res.existNum+"道，失败"+res.noNum+"道"
            //     break
            // case "exist":
            //     msg="内容完全重复！一共"+res.count+"道，修改"+res.existNum+"道"
            //     break
            // default :
            //     msg="导入出错"
            //     break
            // }
            // this.$alert(msg, "导入结果", {
            //     confirmButtonText: "确定"
            // });
        },
        failUpload() {
            this.$loading().close();
            this.$message({
                showClose: true,
                message: "上传失败",
                type: "error"
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.childrenDiv {
    margin: 0 auto;
}
</style>
